<template>
  <div class="breadcrumb-item" @click="clickHandle">
    <a-dropdown v-if="overlay || overlayHTML" class="breadcrumb-link">
      <a class="ant-dropdown-link" @click.stop="e => e.preventDefault()">
        <slot></slot><a-icon class="down" type="down" />
      </a>
      <a-menu v-if="overlay" slot="overlay" v-html="overlay"></a-menu>
      <slot v-else name="overlay" slot="overlay"></slot>
    </a-dropdown>
    <span class="breadcrumb-link" v-else-if="href === '#'">
      <slot></slot>
    </span>
    <a class="breadcrumb-link" v-else>
      <slot></slot>
    </a>
    <span v-if="separatorHTML" class="breadcrumb-separator" v-html="separatorHTML"></span>
    <span v-else-if="separator" class="breadcrumb-separator">{{separator}}</span>
  </div>
</template>
<script>
export default {
  inject: ['separator', 'separatorNode'],
  props: {
    href: {
      type: String,
      default: '#'
    },
    overlay: {
      type: String,
      default: ''
    },
    query: Object
  },
  data() {
    return {
      separatorHTML: null,
      overlayHTML: null,
    }
  },
  methods: {
    clickHandle(e) {
      try{
        if (this.href) {
          let link = {
            path: this.href
          }
          if (this.query) {
            link.query = this.query
          }
          this.$router.push(link)
        }
        this.$emit('click', e)
      } catch(err) {
        console.log(err)
      }
    }
  },
  mounted() {
    this.separatorHTML = this.separatorNode && this.separatorNode[0].elm.outerHTML
    this.overlayHTML = this.$slots.overlay
    // console.log(this.overlayHTML, this.overlay, this.href);
  }
}
</script>
<style lang="less" scoped>
  @import './index.less';
</style>
<style lang="less">
  .breadcrumb-link{
    position: relative;
    .ant-menu-root.ant-menu-vertical, .ant-menu-root.ant-menu-vertical-left, .ant-menu-root.ant-menu-vertical-right, .ant-menu-root.ant-menu-inline{
      position: absolute;
      -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 15%) !important;
      box-shadow: 0 2px 8px rgb(0 0 0 / 15%) !important;
      .ant-menu-item{
        height: 20px;
        line-height: 20px;
      }
    }
  }
</style>